<template>
  <div class="home">
    <Row>
      <Col span="4">

        <v-touch  v-on:panup="callbackShang"  v-on:pandown="callbackXia"  v-on:panend="callbackend" class="wrapper" ref="tapper">
          <ul class="tableall" :style="{height:ulheight+'px',transform:slateY,transition:tran }">
            <li class="class_font" v-for="n in ClassifyArray" @click="nextclass(n)">
              <span slot="title">{{ n.id }}</span>
            </li>
          </ul>
        </v-touch>

      </Col>
      <Col span="20">
        <v-touch  v-on:panup="callbackShang_val"  v-on:pandown="callbackXia_val"  v-on:panend="callbackend_val" class="wrapper" ref="tapper_val">
            <ul class="tableall" :style="{height:ulheight_v+'px',transform:slateY_v,transition:tran_v }">
              <li v-for="img in ClassifyArray">
                <img :src="img.image" alt="">
                <div>{{img.name}}</div>
              </li>
            </ul>
        </v-touch>

      </Col>
    </Row>
  </div>
</template>
<script>
  export default {
    props: {
      ClassifyArray: {
        type: Array,
        default() {
          return []
        }
      },
    },
    components: {},
    data() {
      return {
        /***********************左侧导航*******************************/
        ulheight: '',
        slateY: "translateY(0px)",
        tran:'0',
        Yval:-5,
        /***********************右侧分类*******************************/
        ulheight_v: '',
        slateY_v: "translateY(0px)",
        tran_v:'0',
        Yval_v:-5,

      }
    },
    methods: {

      nextclass(e) {  //点击左侧分类

      },
      GetHeight() {  //分类的高度
        setTimeout(() => {
          if (this.ClassifyArray) {
            this.ulheight = this.ClassifyArray.length * 55;
            let len = Math.ceil(this.ClassifyArray.length/3);
            this.ulheight_v = len*106;
            return false;
          } else {
            this.GetHeight();
          }
        }, 1)
      },

      /**************************左侧导航***************************************/
      callbackXia(e){ //下拉
        this.tran = 'initial';
        let heig = this.Yval + e.deltaY;
        if(heig>=150){
          this.slateY = `translateY(150px)`;
          return false
        }
        this.slateY = `translateY(${this.Yval + e.deltaY}px)`;

      },
      callbackShang(e) {//上拉
        this.tran = 'initial';
        let heig = this.Yval + e.deltaY;

        let allheig = -((this.ulheight-document.body.clientHeight)+150);
        if(heig<=allheig){
          this.slateY = `translateY(${allheig}px)`;
          return false
        }
        this.slateY = `translateY(${this.Yval + e.deltaY}px)`;
      },
      callbackend(e) {  //拖动结束
        this.Yval+=e.deltaY;
        this.slateY = `translateY(${this.Yval}px)`;
        if(this.Yval > 0 ){
          this.Yval = 0;
          this.slateY = `translateY(0px)`;
          this.tran='all 0.5s';
        }

        let allheig = -((this.ulheight-document.body.clientHeight)+150);
        let buttom = -(this.ulheight-document.body.clientHeight);
        if(this.Yval < allheig||this.Yval<buttom){
          this.Yval = buttom;
          this.slateY = `translateY(${buttom}px)`;
          this.tran='all 0.5s';
        }
      },

      /**************************右侧分类***************************************/

      callbackXia_val(e){//下拉
        this.tran_v = 'initial';
        let heig = this.Yval_v + e.deltaY;
        if(heig>=150){
          this.slateY_v = `translateY(150px)`;
          return false
        }
        this.slateY_v = `translateY(${this.Yval_v + e.deltaY}px)`;
      },
      callbackShang_val(e){//上拉
        this.tran_v = 'initial';
        let heig = this.Yval_v + e.deltaY;
        let allheig = -((this.ulheight_v-document.body.clientHeight)+150);
        if(heig<=allheig){
          this.slateY_v = `translateY(${allheig}px)`;
          return false
        }
        this.slateY_v = `translateY(${this.Yval_v + e.deltaY}px)`;
      },
      callbackend_val(e){
        this.Yval_v+=e.deltaY;
        this.slateY_v = `translateY(${this.Yval_v}px)`;
        if(this.Yval_v > 0 ){
          this.Yval_v = 0;
          this.slateY_v = `translateY(0px)`;
          this.tran_v='all 0.5s';
        }
        let allheig = -((this.ulheight_v-document.body.clientHeight)+150);
        let buttom = -(this.ulheight_v-document.body.clientHeight);
        if(this.Yval_v < allheig||this.Yval_v<buttom){
          this.Yval_v = buttom;
          this.slateY_v = `translateY(${buttom}px)`;
          this.tran_v='all 0.5s';
        }
      },



    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      this.GetHeight()
      // console.log(this.ulheight ) ;
    }
  }
</script>
<style scoped>

  .home {
    width: 100%;
    height: calc(100vh - 55px);
    overflow: hidden;
  }

  .tableall {
    left: 0;
    text-align: center;
    overflow: hidden;
    border-right: 1px solid #c2d5ce;
    /*transition: all 0.5s;*/
  }

  .class_font {
    width: 100%;
    height: 55px;
    line-height: 55px;
    overflow: hidden;
    color: #595959;
    font-size: 14px;
    letter-spacing: 2px;
  }
  ul{
    width:100%;
    height:100%;
  }
  ul li{
    width: 32.8%;
    float: left;
    text-align: center;
  }
  ul li img{
    width:70px;
    height:70px;
    background-size: 100% 100%;
    display: block;
    margin: auto;
  }
  ul li div{
    text-align: center;
    color: #333;
    height: 35px;
    margin-top: 2px;
    -webkit-box-pack: start;
    font-size: 12px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
